<!DOCTYPE html>
<html>
<head>
  <script src="lib/crafty.js"></script>
  <script src="src/game.js"></script>
  <script src="lib/jquery.js"></script>
  <script src="src/include.js"></script>
  <link href="style/style.css" rel="stylesheet" type="text/css">
  <script src="src/guide.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
  
   <script>
  //SCRIPT TO CHECK IF SIGNED IN OR NOT
	window.onload = function () {
		Parse.initialize("EL9rGBARwKQl3NL4HAQ2U4GxQYjXV8dDDvDDaTPe", "WQLflsIP1zoVHCZgNjpr95dtrmaqjCaCkWSbOSrU");
 
}

  </script>
</head>
<body>
  <div id="container">
      <div id="header">
          <h1>
               JavaScript Game - Guide 
          </h1>
      </div>
      
      <div id="navigation"></div>
      
      <div id="content-container">
          <div id="content">
              
              <h2>
                  Goal:
              </h2>
              <p>
                <br> The goal of the game is to get the highest score possible. <br>
                You can gain points through collecting coins (see below) and completing stages. <br>
                A stage can be completed through reaching the village in the bottom corner of the map. <br>
                Completing a stage rewards the player with 10,000 points as well as additional time to the timer. <br>
                This time that is added gets smaller as users reach later stages. <br>
                The user starts with 20 seconds on the timer and loses when the time runs out! <br> <br>
              </p>
              
              <h2>
                  Controls:
              </h2>
              <p>
                <br> In order to move the character, use W,A,S,D <br> <br>
              </p>
              
              <h2>
                  Coin Values:
              </h2>

              <p>
                  <br> Click on the following coin images to learn more: <br> <br>
              </p>
                            
              <div id='yellow_wrap'>
                <div id='yellow_clickable_div' class="slide">
                  <img src="assets/images/coinYellow.png">
                  <img src="assets/images/coinYellow.png">
                  <img src="assets/images/coinYellow.png">
                  <img src="assets/images/coinYellow.png">
                  <img src="assets/images/coinYellow.png">
                  <img src="assets/images/coinYellow.png">
                  <img src="assets/images/coinYellow.png">
                </div>
              
                <div id="yellow_nav_menu">
                  <br>
                  <b>Value: </b>100 <br> <br>
                  The <b>yellow coin</b> is the first coin that you can collect in the game. <br> <br>
                </div>
              </div>


              <div id='red_wrap'>
                <div id='red_clickable_div' class="slide">
                  <img src="assets/images/coinRed.png">
                  <img src="assets/images/coinRed.png">
                  <img src="assets/images/coinRed.png">
                  <img src="assets/images/coinRed.png">
                  <img src="assets/images/coinRed.png">
                  <img src="assets/images/coinRed.png">
                  <img src="assets/images/coinRed.png">
                </div>
                <div id="red_nav_menu">
                  <br>
                  <b>Value: </b>200 <br> <br>
                  The <b>red coin</b> is the second coin that you can collect in the game. <br> <br>
                </div>
              </div>
                              
              <div id='green_wrap'>
                <div id='green_clickable_div' class="slide">
                  <img src="assets/images/coinGreen.png">
                  <img src="assets/images/coinGreen.png">
                  <img src="assets/images/coinGreen.png">
                  <img src="assets/images/coinGreen.png">
                  <img src="assets/images/coinGreen.png">
                  <img src="assets/images/coinGreen.png">
                  <img src="assets/images/coinGreen.png">
                </div>
                <div id="green_nav_menu">
                  <br>
                  <b>Value: </b>400 <br> <br>
                  The <b>green coin</b> is the third coin that you can collect in the game. <br> <br>
                </div>
              </div>
              
              <div id='blue_wrap'>
                <div id='blue_clickable_div' class="slide">
                  <img src="assets/images/coinBlue.png">
                  <img src="assets/images/coinBlue.png">
                  <img src="assets/images/coinBlue.png">
                  <img src="assets/images/coinBlue.png">
                  <img src="assets/images/coinBlue.png">
                  <img src="assets/images/coinBlue.png">
                  <img src="assets/images/coinBlue.png">
                </div>
                <div id="blue_nav_menu">
                  <br>
                  <b>Value: </b>1000 <br> <br>
                  The <b>blue coin</b> is the fourth coin that you can collect in the game. <br> <br>
                </div>
              </div>
              <br> <br>
	      <h2>
                  Powerups:
              </h2>
	      <p>
                  <br> Click on the following powerup images to learn more: <br> <br>
              </p>
                            
              <div id='boots_wrap'>
                <div id='boots_clickable_div' class="slide">
                  <img src="assets/images/boots.png">
                  <img src="assets/images/boots.png">
                  <img src="assets/images/boots.png">
                  <img src="assets/images/boots.png">
                  <img src="assets/images/boots.png">
                  <img src="assets/images/boots.png">
                  <img src="assets/images/boots.png">
                </div>
                <div id="boots_nav_menu">

                  <br>
                  The <strong>boots</strong> powerup gives your character a speed increase for the next stage. <br> <br>
                </div>
              </div>
              
              <div id='hourglass_wrap'>
                <div id='hourglass_clickable_div' class="slide">
                  <img src="assets/images/hourglass.png">
                  <img src="assets/images/hourglass.png">
                  <img src="assets/images/hourglass.png">
                  <img src="assets/images/hourglass.png">
                  <img src="assets/images/hourglass.png">
                  <img src="assets/images/hourglass.png">
                  <img src="assets/images/hourglass.png">
                </div>
                <div id="hourglass_nav_menu">

                  <br>
                  The <strong>hourglass</strong> powerup adds time to the game clock. <br> <br>
                </div>
              </div>
                              
              <div id='multiplier_wrap'>
                <div id='multiplier_clickable_div' class="slide">
                  <img src="assets/images/multiplier.png">
                  <img src="assets/images/multiplier.png">
                  <img src="assets/images/multiplier.png">
                  <img src="assets/images/multiplier.png">
                  <img src="assets/images/multiplier.png">
                  <img src="assets/images/multiplier.png">
                  <img src="assets/images/multiplier.png">
                </div>
                <div id="multiplier_nav_menu">

                  <br>
                  The <strong>coin multiplier</strong> powerup doubles the value of coins collected for a short time. <br> <br>
                </div>
              </div>
              
              <div id='flame_wrap'>
                <div id='flame_clickable_div' class="slide">
                  <img src="assets/images/flame.png">
                  <img src="assets/images/flame.png">
                  <img src="assets/images/flame.png">
                  <img src="assets/images/flame.png">
                  <img src="assets/images/flame.png">
                  <img src="assets/images/flame.png">
                  <img src="assets/images/flame.png">
                </div>
                <div id="flame_nav_menu">

                  <br>
                  The <strong>fire</strong> removes all bushes on the currest stage. <br> <br>
                </div>
              </div>
	      <br>
                <h2>
                  Classes:
                </h2>
                <br>
                <b>Healer: &nbsp;&nbsp;&nbsp;</b><img src="assets/images/mhealer.png"><img src="assets/images/fhealer.png"> <br>
                <b>Mage: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b><img src="assets/images/mmage.png"><img src="assets/images/fmage.png"> <br>
                <b>Ninja: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b><img src="assets/images/mninja.png"><img src="assets/images/fninja.png"> <br>
                <b>Ranger: &nbsp;&nbsp;</b><img src="assets/images/mranger.png"><img src="assets/images/franger.png"> <br>
                <b>Warrior: &nbsp;&nbsp;</b><img src="assets/images/mwarrior.png"><img src="assets/images/fwarrior.png"> <br>
              </br>
              <h2>
                Hints
              </h2>
              <p>
                <br> Each stage you complete increases the frequency of the higher value coins. By later stages you will be finding many more blue coins! <br>
                <br> The amount of time added for completing stages and collecting hourglasses gets smaller as you get to later stages but the number of hourglasses increases <br>
              </p>

          </div>
          <div id="footer"></div>
      </div>
  </div>

  
</body>
</html>
